<template>
  <el-form :model="form"  ref="ruleForm"    >
   <el-form-item
      prop="value"
      :label="label"
      :rules="[
        { required: true, message: '车牌号码不能为空', trigger: 'blur' },
        { min:7, max: 8,message:'车牌号长度7-8位之间', trigger: 'blur' },
      ]"
    >

      <el-input class="car" placeholder="请输入内容"   autocomplete="off" @blur="blurChange" v-model="form.value">
         <template slot="prepend" >
           <div class="dropdown" :class="{open: isShow}">
               <button type="button" class="btn dropdown-toggle"  @click="openDiv"    >
                   省
                   <span class="caret"></span>
               </button>
               <div class="dropdown-menu "   style="width:355px">
                   <div class="float-e-margins" style="padding:5px">
                       <div>
                           <button v-for="(item,index) in list" v-bind:key="index" type="button" class="btn btn-outline btn-default" style="padding: 3px 6px 3px 6px" @click="addProvince(item)">{{item}}</button>
                       </div>
                   </div>
               </div>
           </div>
         </template>
       </el-input>


    </el-form-item>
  </el-form>


</template>

<script>
  export default {
    props: {
      item: String,
      label: {
        type: String,
        default: ''
      }
    },
    created() {
      if(this.item  && (this.item.length==7 || this.item.length==8)){
        this.form.province=this.item.substring(0,1)
        this.form.value=this.item
      }
    },
     data(){
       return {
         list:['京', '津', '冀', '晋', '蒙', '辽', '吉', '黑', '沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫', '鄂', '湘', '粤', '桂', '琼', '渝', '川', '贵', '云', '藏', '陕', '甘', '青','宁','新','台','港','澳','使','领','警','学'],
         isShow: false,
         form: {
           province: undefined,
           value: undefined
         }
       }
     },
     methods:{
       openDiv(){
         this.isShow =!this.isShow
       },
       //点击省 份
       addProvince(val){
           this.form.province=val
           this.form.value=val
           this.isShow= false
       },
       blurChange(){
         
         if(this.form.value){
           let temp=this.form.value.toUpperCase()
           //先转大写
           this.form.value= temp
           
           if(this.form.value.length==7 || this.form.value.length==8){
             this.$set(this.form,'province', this.form.province);
             this.$set(this.form,'carNo', temp.substr(1,temp.length));
             this.$emit('carback', this.form);
           }    
         }
       },
       //外部调用方法，清空表单的值
       clearForm(){       
         this.form= {
           province: undefined,
           value: undefined
         }
       }
     },
     watch: {
       item(newValue, oldValue) {
         if(newValue  && (newValue.length==7 || newValue.length==8)){
           this.form.province=newValue.substring(0,1)
           this.form.value=newValue
         }
       }
     },
  }
</script>

<style>

.car .el-input-group__prepend{
  padding:0;
}
</style>

<style scoped>
  .dropup, .dropdown {
      position: relative;
  }

  .dropdown  .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 3px;
}

  .dropdown   .caret {
    display: inline-block;
    width: 0px;
    height: 0px;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px dashed;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

.btn .caret {
    margin-left: 0px;
}

.dropdown .dropdown-menu {
    border: medium none;
    display: none;
    float: left;
    font-size: 12px;
    left: 0px;
    list-style: outside none none;
    padding: 0px;
    position: absolute;
    text-shadow: none;
    top: 34px;
    z-index: 1000;
    border-radius: 0px;
    box-shadow: rgba(86, 96, 117, 0.3) 0px 0px 3px;
     min-width: 160px;
    margin: 2px 0px  0px;
    font-size: 14px;
    text-align: left;
    background-color: rgb(255, 255, 255);
     background-clip: padding-box;
}

.open > .dropdown-menu {
    display: block;
}

.dropdown .btn {
    display: inline-block;
    padding: 6px 12px;
    margin-bottom: 0px;
    font-size: 14px;
    font-weight: normal;
    line-height: 1.42857;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    touch-action: manipulation;
    cursor: pointer;
    user-select: none;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
    border-color: rgb(204, 204, 204);
    border-radius: 3px;
    float: left;
}

.dropdown .btn-outline {
    color: inherit;
    background-color: transparent;
    transition: all 0.5s ease 0s;
}

.dropdown .btn-outline:hover {
    background-color: #a3d3ff;
}
.dropdown .float-e-margins .btn {
    margin-bottom: 5px;
}


</style>
